<div class="f-eng-term-translate clearfix">
    <div class="translate-pic-btn" ng-click="clickTranslateBtn()">
    <p></p>
    <a>工程术语英汉双解</a>
    </div>
    <div class="outer-container"ng-if="isShowTranslate" >
    </div>
    <div class="translate-window" ng-if="isShowTranslate">
        <div style="margin-bottom: 20px; width: 100%;border-top: 1px solid #ddd;"></div>
        <div style="padding-left:50px;padding-right: 50px;">
            <div class="delete-btn" ng-click="leav()"></div>
            <div class="translate-input">
                <div class="translate-describe clearfix">
                    <a  style="font-size: 24px; line-height: 30px; margin-right: 15px;  font-weight: bold;">工程术语翻译</a><a style="font-size: 16px; padding-top: 10px;  line-height: 20px" >工程专业术语的中英文翻译</a>
                </div>
                <div class="translate-content" contenteditable="true" style="text-align: left" id="translateModel"></div>
                <div class="translate-btn ">
                    <div class="f-loadmore clearfix" style="float:right">
                        <button class="f-loadmore-center" style="line-height:30px" ng-click="translate()">翻译</button>
                    </div>
                </div>
            </div>
            <div class="translate-output">
                <div class="translate-result-title">
                    <span>翻译结果</span>
                </div>
                <div class="translate-result"   style="text-align: left" ng-bind-html="result" ng-show="result != ''"></div>
                <div class="translate-result"   style="text-align: left"  ng-show="result == ''">{{'暂无翻译数据'}}</div>
                <div class="translate-explain">
                    <div class="translate-explain-title">术语解释：</div>
                    <div class="translate-explain-content" ng-bind-html="sceTranslate"></div>
                </div>
            </div>
        </div>
        

    </div>



</div>
<style>

    .outer-container{
        position: fixed;
        top:0;
        left: 0;
        opacity: 0.5;
        width:100%;
        height:100%;
        background: #000;
        z-index: 3004;
    }
    /**工程术语翻译**/
    .translate-pic-btn{
        cursor: pointer;
    }
    .f-eng-term-translate{
        position:relative;
        margin:-12px 0 0 30px;
        float: left;
        width: 160px;
        height: 25px;
        padding-left: 18px;
        background: #F5F5F3;
        text-align: center;
        padding-top: 5px;
        border: 1px solid #ddd;
    }
    .f-eng-term-translate p{
        display: block;
        margin-top: 2px;
        margin-right: 5px;
        width: 20px;
        height: 16px;
        background: url("them/images/engireerterm-pic.png")no-repeat;
        float: left;
    }
    .f-eng-term-translate a{
        float: left;
        display: block;
        line-height: 16px;
        font-size: 16px;
    }
    .translate-con{
        position: absolute;
        top: 30px;
        left: -750px;
        width: 914px;
        height: 665px;
    }
    .translate-window{
        position: fixed;
        top: 30px;
        width: 695px;
        padding-top:40px;
        padding-bottom: 40px;
        background: #fff;
        border: 1px solid #ddd;
        z-index: 5000;
        background-image: url("them/images/translate_tile.png");
        background-repeat: no-repeat;
        background-repeat: no-repeat;
        background-position: 15px 8px;
    }
    .f-loadmore-center{
        background: #30a3ff;
        color: #fff;
        border:0;
        border-radius:5px;
        cursor: pointer;
        outline:none;
    }
    .delete-btn{
        position: absolute;
        top:5px;
        right:5px;
        width:20px;
        height:20px;
        background: url("them/images/compImages/delete.png");
        cursor: pointer;
    }

    .translate-describe{
        width:100%;
        height:50px;
        margin-top: 10px;
    }
    .translate-describe a{
        display:block;
        float:left;
    }
    .translate-input{
        width:100%;
    }
    .translate-input .translate-content{
        height: 60px;
        width: 578px;
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 10px;
        border: 1px solid #30a3ff;
        overflow-y: auto;
        padding-right: 10px;
        box-shadow: 1px 1px 1px #e1e1e1,-1px -1px 1px #e1e1e1;
    }
    .translate-btn{
        width:100%;
        height:50px
    }

    .translate-output{
        margin-top:20px;
        width:100%;
        border:1px solid #ddd;
    }
    .translate-result-title{
        height:45px;
        width:100%;
        text-align: left;
        background:#fafafa;
        word-wrap: break-word;
        word-break: normal;
    }
    .translate-result{
        text-align: left;
        word-wrap: break-word;
        word-break: normal;
        width: 575px;
        min-height: 70px;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 5px;
    }
    .translate-result-title span{
        padding-left:5px;
        font-size:14px;
        line-height:40px;
    }
    .translate-explain{
        height: 130px;
        border-top: 1px dashed #ddd;
        overflow-y: scroll;
    }
    .translate-explain-title{
        height: 40px;
        font-size: 14px;
        text-align: left;
        padding-left: 10px;
        line-height: 40px;
    }
    .translate-explain-content{
        text-align: left;
        width: 547px;
        padding-left: 10px;
        padding-right: 10px;
    }
</style>